<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        let xData = [];
        let yData = [];
        let legend = [];
        let json = this.data;
        try {
          var length = Object.keys(json.list[0]).length - 1;
          let arr = new Array();
          for (let j = 0; j < length; j++) {
            xData = [];
            for (let i in json.list) {
              xData.push(json.list[i].name);
              arr.push(json.list[i]["value" + (j + 1).toString()]);
            }
            let array = arr.slice(
              j * json.list.length,
              j * json.list.length + json.list.length
            );
            yData.push(array);
          }
          legend = json.legend;
        } catch (err) {
          console.log(err);
          return false;
        }
        // var data = {
        //   area: [
        //     "新荣区",
        //     "平城区",
        //     "云冈区",
        //     "云州区",
        //     "阳高县",
        //     "天镇县",
        //     "广灵县",
        //     "浑源县",
        //     "左云县",
        //   ],
        //   legend: [
        //     "因病",
        //     "因残",
        //     "因学",
        //     "因灾",
        //     "缺土地",
        //     "缺水",
        //     "缺技术",
        //     "缺资金",
        //     "交通条件落后",
        //     "自身发展动力不足",
        //     "其他原因",
        //   ],
        //   data: [
        //     [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //     [320, 302, 301, 334, 390, 330, 320, 100, 50],
        //   ],
        // };
        var colors = this.json.theme.echartsBackgroundColor;
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow", //默认为line，line直线，cross十字准星，shadow阴影
              crossStyle: {
                color: "none",
              },
            },
          },
          color: colors,
          legend: {
            top: 10,
            left: 30,
            itemWidth: 10,
            itemHeight: 10,
            // padding: [5, 10],
            textStyle: {
              fontSize: 14,
              color: this.json.theme.echartsBackgroundColor[0],
              padding: [3, 0, 0, 0],
            },
            data: legend,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "18%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            axisLabel: {
              color: this.json.theme.echartsBackgroundColor[0],
            },
            axisLine: {
              lineStyle: {
                color: this.json.theme.echartsBackgroundColor[0],
              },
              width: 5,
            },
            axisTick: {
              show: false,
            },
            data: xData,
          },
          yAxis: {
            type: "value",
            axisLabel: {
              color: this.json.theme.echartsBackgroundColor[0],
            },
            axisLine: {
              lineStyle: {
                color: this.json.theme.echartsBackgroundColor[0],
              },
              width: 5,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(150, 164, 244, 0.3)",
              },
              show: false, //横线
            },
          },
          series: [],
        };
        for (var i = 0; i < legend.length; i++) {
          option.series.push({
            name: legend[i],
            type: "bar",
            stack: "总量",
            barWidth: "20%",
            label: {
              show: false,
              position: "insideRight",
            },
            data: yData[i],
          });
        }
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
